#@layoutT('')
#define main()

   <div class="layui-row">
            #@formStart()
            #@queryStart('客户姓名')
            <input type="search" name="customername" autocomplete="off" class="layui-input" placeholder="客户姓名"/>
            #@queryEnd()
            #@queryStart('联系方式')
            <input type="search" name="phonenum" autocomplete="off" class="layui-input " placeholder="联系方式"/>
            #@queryEnd()
            #@queryStart('证件号')
            <input type="search" name="idcard" autocomplete="off" class="layui-input" placeholder="证件号"/>
            #@queryEnd()
            #@formEnd()

            #@table()
   </div>

    <div id="line1" class="layui-col-xs12 layui-col-sm6 layui-col-md6"  style="height:400px;float: left"></div>
    <div id="line2" class="layui-col-xs12 layui-col-sm6 layui-col-md6" style="height:400px;float: left"></div>
    <div id="line3" class="layui-col-xs12 layui-col-sm6 layui-col-md6" style="height:400px;float: left"></div>
    <div id="line4" class="layui-col-xs12 layui-col-sm6 layui-col-md6" style="height:400px;float: left"></div>
    <div id="chart0" class="chart"></div>
    <div id="chart1" class="chart"></div>
    <div id="chart2" class="chart"></div>
    <div id="chart3" class="chart"></div>

#end

#define js()

<script src="#(path)/static/libs/echarts/echarts.min.js"></script>
<script src="#(path)/static/libs/echarts/ecstat/ecStat.min.js"></script><!-- 工具条js -->
<script src="#(path)/static/libs/echarts/echarts.tool.js"></script>
<style type="text/css">
   .chart{
      width:50%;height:250px;margin-top:30px;float: left;display: none;
   }
</style>

<script type="text/html" id="sexStr">
   {{ d.gender == 1 ? '男' : '女' }}
</script>
<!-- 分页表格 -->
<script>
    gridArgs.title='';
    gridArgs.dataId='id';
    gridArgs.pageSize = 3;
    gridArgs.heightDiff=500;//调整表格高度
    gridArgs.deleteUrl='#(path)/portal/business/iCustomerInfo/delete';
    gridArgs.updateUrl='#(path)/portal/business/iCustomerInfo/edit/';
    gridArgs.addUrl='#(path)/portal/business/iCustomerInfo/add';
    gridArgs.gridDivId ='maingrid';
    initGrid({id : 'maingrid'
        ,elem : '#maingrid'
        ,toolbar:'#table_toolbar'//开启头部工具栏，并为其绑定左侧模板
        ,cellMinWidth: 100
        ,cols : [ [
          {title: '主键',field : 'id',width : 35,checkbox : true},
				 {title:'客户姓名',field:'customername'},
				 {title:'性别',field:'gender' ,templet:'#sexStr'},
				 {title:'年龄',field:'age'},
				 {title:'联系方式',field:'phonenum'},
				 {title:'证件号',field:'idcard'},
				 {title:'设备ID',field:'devideid'},
            ] ]
        ,url:"#(path)/portal/business/iCustomerInfo/list"
        ,searchForm : 'searchForm'
    });

</script>


<!-- 从表 -->
<script>
   //从表1
   function renderSubTable1(devideid,idcard){
       var queryParams={"devideid":devideid,"idcard":idcard}
       echart.getData("#(path)/portal/echart/queryTemperature",queryParams,"line1");
       echart.getData("#(path)/portal/echart/queryBloodpressure",queryParams,"line2");
       echart.getData("#(path)/portal/echart/queryOxygen",queryParams,"line3");
       echart.getData("#(path)/portal/echart/queryCountWarn",queryParams,"line4");
   }

</script>

#end

<!-- 监听主表点击事件 -->
#define layuiFunc()
//监听行单击事件（双击事件为：rowDouble）
table.on('row(maingrid)', function(obj){
var data = obj.data;
var devideid=data.devideid;
var idcard=data.idcard;
//渲染从表数据
renderSubTable1(devideid,idcard);

//标注选中样式
obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');

});
#end
